<template>
	<!-- 缩略图显示-->
	<div class="img-show" v-if="imgUrl">
		<img :src="imgUrl" class="avatar" />
		<span class="actions">
			<!-- 放大 -->
			<span class="item">
				<svg-icon className="icon-svg" icon="icon-zoomin" size="34px" @click="enlarge()"></svg-icon>
			</span>
			<!-- 删除 -->
			<span class="item">
				<svg-icon className="icon-svg" icon="icon-delete" size="34px" @click="del()"></svg-icon>
			</span>
		</span>
	</div>
	<!-- 图片上传 -->
	<el-upload
		v-else
		class="uploader-avatar"
		:action="constant.uploadUrl"
		:before-upload="beforeUpload"
		:on-success="handleSuccess"
		:show-file-list="false"
	>
		<svg-icon className="icon-svg" icon="icon-plus" size="34px"></svg-icon>
	</el-upload>
	<!-- 图片显示对话框 -->
	<el-dialog v-model="dialogVisible" :title="'图片预览'">
		<img width="100%" :src="dialogUrl" alt="" style="width: 100%" />
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, UploadProps } from 'element-plus'
import { ref, reactive } from 'vue'
import constant from '@/utils/constant'

const emit = defineEmits(['update:modelValue'])
const props = defineProps(['modelValue'])

const imgUrl = ref(props.modelValue)
const dialogVisible = ref(false)
const dialogUrl = ref()

const enlarge = () => {
	dialogVisible.value = true
	dialogUrl.value = imgUrl.value
}
const del = () => {
	imgUrl.value = ''
	dialogUrl.value = ''
	emit('update:modelValue', imgUrl.value)
}

//上传附件
const fileDataForm = reactive({
	name: '',
	platform: '',
	size: '',
	url: ''
})

const handleSuccess: UploadProps['onSuccess'] = (res: { code: number; msg: string; data: any }, file: any) => {
	if (res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	}

	Object.assign(fileDataForm, res.data)

	imgUrl.value = fileDataForm.url
	emit('update:modelValue', imgUrl.value)
}

const beforeUpload: UploadProps['beforeUpload'] = (file: { size: number }) => {
	if (file.size / 1024 / 1024 > 20) {
		ElMessage.error('文件大小不能超过 20 M')
		return false
	}
	return true
}

defineExpose({
	imgUrl
})
</script>

<style scoped>
.uploader-avatar :deep(.el-upload) {
	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	cursor: pointer;
	line-height: 146px;
	vertical-align: top;
	overflow: hidden;
}
.img-show {
	position: relative;
	border: 1px solid #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	cursor: pointer;
	overflow: hidden;
}
.uploader-avatar :deep(.el-upload:hover) {
	border-color: #409eff;
}
.uploader-avatar :deep(i) {
	font-size: 28px;
	color: #8c939d;
}
.avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.actions {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 148px;
	left: 0;
	top: 0;
	cursor: default;
	text-align: center;
	color: #fff;
	opacity: 0;
	font-size: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s;
}
.actions:hover {
	opacity: 1;
}
.actions:hover span {
	display: inline-block;
}
.actions span {
	display: none;
	margin: 0 16px;
	cursor: pointer;
}
</style>
